/* ======================== */
/*   STYLE GLOBAL           */
/* ======================== */

body {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    max-height: 100vh; /* Définit la hauteur maximale à 100% de la hauteur de l'écran */
    padding: 0; /* Supprime tout padding autour du body */
    margin: 0; /* Supprime toutes les marges par défaut */
}

html::-webkit-scrollbar {
    display: none; /* Cache la barre sur Chrome, Edge et Safari */
}

html {
    scrollbar-width: none; /* Cache la barre sur Firefox */
}


/* ======================== */
/*   HEADER                 */
/* ======================== */

header {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    font-family: "Capriola", sans-serif; /* Typographie Capriola utilisée et remplacée par défault */
    font-style: normal; /* Style de la typographie Capriola */
    font-size: 0.9em; /* Taille de la typographie */
    color: black; /* Couleur de la typographie */
    min-height: 3%; /* Hauteur minimale du header = 3% de la hauteur de la fenêtre */
    padding: 1% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    width: 100%; /* Le header prend toute la largeur de l'écran */
    position: fixed; /* Fixe le header en haut de la page */
    overflow: hidden; /* Empêche tout débordement du contenu à l'intérieur du header */
    z-index: 100; /* Indique l'ordre des priorités pour la superposition */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    header {
        background-color: white; /* Ajout d'un background blanc */
        font-size: 0.8em; /* Changement de la taille de la typographie du header */
        min-height: 5%; /* Hauteur minimale du header = 4% de la hauteur de la fenêtre */
        padding: 3% 3%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }
}

@media screen and (max-width: 550px) {
    header {
        background-color: white; /* Ajout d'un background blanc */
        font-size: 0.7em; /* Changement de la taille de la typographie du header */
        min-height: 5%; /* Hauteur minimale du header = 5% de la hauteur de la fenêtre */
        padding: 4% 4%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }

    .Graphiste {
        display: none !important; /* Disparition de la catégorie "Graphiste" */
    }
}


/* ======================== */
/*   MENU                   */
/* ======================== */

.menu {
    display: flex;
    justify-content: space-between;
}

.boutonFiona {
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Couleur de la typographie */
}

.boutonFiona:hover {
    color: #7A7A7A;
}

.boutonProjets {
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Couleur de la typographie */
}

.boutonProjets:hover {
    color: #7A7A7A;
}

.boutonExpérimental {
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Couleur de la typographie */
}

.boutonExpérimental:hover {
    color: #7A7A7A;
}

.boutonInfos {
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Couleur de la typographie */
}

.boutonInfos:hover {
    color: #7A7A7A;
}


/* ======================== */
/*     CONTENEUR GLOBAL     */
/* ======================== */

.container {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    font-family: "Inter", sans-serif; /* Typographie CInter utilisée et remplacée par défault */
    font-style: normal; /* Style de la typographie Capriola */
    font-size: 1em; /* Taille de la typographie */
    color: black; /* Couleur de la typographie */
    min-height: 85%; /* Hauteur minimale du header = 3% de la hauteur de la fenêtre */
    padding: 3% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    width: 100%; /* Le header prend toute la largeur de l'écran */
    overflow-y: scroll; /* Active le scroll uniquement dans ".container" */
    scrollbar-width: none; /* Cache la barre de défilement sur Firefox */
    z-index: 50; /* Indique l'ordre des priorités pour la superposition */
    display: flex; /* Passe le container en mode flex */
    flex-direction: column; /* Affiche les images en colonne */
    align-items: center; /* Centre le contenu dans mon container */
}

/* ======================== */

@media screen and (max-width: 900px) {
    .layout {
        grid-template-columns: repeat(9, 2fr); /* Réduit le nombre de colonnes de moitié */
    }

    .image-item {
        grid-column: span 2; /* Chaque image occupe 2 colonnes */
    }

    .image-item img {
        width: 100%; /* Garantit que les images s'adaptent à leur nouvelle largeur */
        height: auto; /* Maintient le ratio des images */
    }
}

@media screen and (max-width: 550px) {
    .container {
        min-height: 6%; /* Hauteur minimale du header = 5% de la hauteur de la fenêtre */
        padding: 8% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }
}


/* ======================== */
/*   LAYOUT                 */
/* ======================== */

.layout {
    display: grid; /* Devient une grille CSS */
    grid-template-rows: repeat(1, auto); /* Lignes de la grille CSS */
    grid-template-columns: repeat(18, 1fr); /* Colonnes de la grille CSS */
    gap: 1.5rem; /* Espace entre les éléments de la grille */
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    padding: 1% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
}

/* ======================== */

@media screen and (max-width: 768px) {
    .layout {
        display: flex; /* Passe le container en mode flex */
        flex-direction: column; /* Affiche les images en colonne */
        align-items: center; /* Centre le contenu dans mon container */
        gap: 1rem; /* Espace entre les éléments de la grille */
        padding: 3% 3%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }
}


/* ======================== */
/*    GESTION DES IMAGES    */
/* ======================== */

.image-item {
    position: relative; /* Positionnement relatif pour permettre le positionnement absolu de ses enfants si nécessaire */
    width: 100%; /* L'élément occupe 100% de la largeur disponible */
}


.image-item img {
    width: 100%; /* L'image occupe 100% de la largeur de son conteneur parent */
    height: auto; /* La hauteur est ajustée automatiquement pour conserver les proportions */
    display: block; /* L'image est un élément de type bloc */
}


/* ======================== */
/* POSITIONNEMENT IMAGES    */
/* ======================== */

.img1 {
    grid-column: 10 / 14;
    grid-row: 1 / 6;
}

.img2 {
    grid-column: 5 / 10;
    grid-row: 4 / 9;
}


.img3 {
    grid-column: 10 / 16;
    grid-row: 7 / 17;
}


.img4 {
    grid-column: 6 / 10;
    grid-row: 15 / 20;
}


.img5 {
    grid-column: 10 / 15;
    grid-row: 18 / 22;
}


.img6 {
    grid-column: 6 / 10;
    grid-row: 21 / 24;
}

/* ======================== */
/* TYPOGRAPHIES             */
/* ======================== */

.texteprojet {
    font-family: "inter", sans-serif;
    font-style: italic;
    color: black;
    font-size: 11px;
    margin: 0.5em 0em;
    padding: 0%;
}

.légende {
    grid-column: 6 / 9;
    grid-row: 24 / 29;
    line-height: 1.3;
    font-family: "inter", sans-serif;
    color: black;
}

.titre {
   margin: 0%;
   padding: 0%;
}

.texte1 {
   font-style: italic;
   font-size: 13px;
   margin: 0%;
   padding: 0%;
}

.texte2 {
   font-style: normal;
   font-size: 11px;
   margin: 0%;
   padding: 0%;
}

.texte3 {
   font-size: 10px;
   margin-top: 2%;
   padding: 0%;
}


/* ======================== */
/*   FOOTER                 */
/* ======================== */

footer {
   background-color: transparent; /* Aucune couleur de fond n'est définie */
   box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
   font-family: "inter", sans-serif; /* Typographie Inter utilisée et remplacée par défault */
   font-style: normal; /* Style de la typographie Inter */
   font-size: 0.7em; /* Taille de la typographie */
   color: black; /* Couleur de la typographie */
   min-height: 2%; /* Hauteur minimale du header = 2% de la hauteur de la fenêtre */
   padding: 1% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
   width: 100%; /* Le header prend toute la largeur de l'écran */
   position: fixed; /* Fixe le header en haut de la page */
   overflow: hidden; /* Empêche tout débordement du contenu à l'intérieur du header */
   z-index: 100; /* Indique l'ordre des priorités pour la superposition */
   bottom: 0; /* Positionne le footer à 0px du bas de la fenêtre */
   left: 0; /* Positionne le footer à 0px du côté gauche de la fenêtre */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
   footer {
       background-color: white; /* Ajout d'un background blanc */
       min-height: 4%; /* Hauteur minimale du header = 4% de la hauteur de la fenêtre */
       padding: 3% 3%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
   }
}

@media screen and (max-width: 550px) { /* Pour les écrans inférieurs à 768px */
   footer {
       background-color: white; /* Ajout d'un background blanc */
       font-size: 0.6em; /* Taille de la typographie */
       min-height: 4%; /* Hauteur minimale du header = 4% de la hauteur de la fenêtre */
       padding: 4% 4%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
   }
}


/* ======================== */
/* CONTENU DU FOOTER        */
/* ======================== */

.bas {
   display: flex;
   justify-content: space-between;
   background-color: transparent;
}